<template>
  <div class="dd">
    <div class="scene_tips" v-if="false" :style="getPosition">
      <!-- <img src="@/images/scene_tips.png" class="img_back" /> -->
      <div class="scene_tipsall">{{ tipName }}</div>
    </div>
    <!-- <img src="@/images/indexbj.png" alt="" class="indexbj" /> -->
    <!-- 顶部 -->
    <head-main />
    <!-- task任务菜单 -->
    <div class="taskbox">
      <div
        class="taskitem tool"
        v-for="item in taskdata"
        :key="item.id"
        @click="taskid = item.id"
      >
        <img
          src="@/images/task.png"
          alt=""
          class="normal"
          v-if="taskid != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          class="active taskitemimgac"
          v-if="taskid != item.id"
        />
        <img
          src="@/images/taskac.png"
          alt=""
          class="taskitemimgac"
          v-if="taskid == item.id"
        />
        <div class="taskname">{{ item.name }}</div>
      </div>
    </div>
    <!-- 步骤提示提示 -->
    <tip-text :tiptext="tiptext" v-if="tiptext" />
    <!-- 警告提示 -->
    <warn-ni :wtext="wtext" v-if="wtext" />
    <!-- 检测方法常驻 -->

    <!-- 工具栏 -->
    <div class="gjtoolbox" v-if="taskids == 1">
      <div class="wpmain">
        <div
          class="wpbox"
          v-for="item in wpdata"
          :key="item.id"
          @click="wpidfn(item.id)"
        >
          <div class="tool">
            <img :src="item.src" :alt="item.name" class="wpimgitems" />
            <img
              src="@/images/wpbj.png"
              :alt="item.name"
              class="normal"
              :ref="'normalImg' + item.id"
              v-if="!wpid.includes(item.id)"
            />
            <img
              src="@/images/wpbjac.png"
              :alt="item.name"
              class="active"
              v-if="!wpid.includes(item.id)"
            />
            <img
              class="wpimgyx"
              src="@/images/wpbjac.png"
              :alt="item.name"
              v-if="wpid.includes(item.id)"
            />
          </div>
          <el-tooltip class="item" effect="dark" :content="item.name">
            <div class="wpnames">{{ item.name }}</div>
          </el-tooltip>
        </div>
      </div>
      <div class="tool gjtoolqd" @click="wpqdfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 工具栏提示 -->
    <div class="gjltsbox" v-if="gjltips != ''">
      <div class="gjlt">
        <img src="@/images/tooltips.png" alt="" class="gjltimg" />
        <img
          src="@/images/closexz.png"
          alt=""
          class="choicecloses"
          @click="gjltips = ''"
        />
        <div
          class="glcsbox"
          :class="
            gjltips == '回答错误' || gjltips == '请将SID调至180cm'
              ? 'gjltips'
              : 'gjltipss'
          "
        >
          {{ gjltips }}
        </div>
      </div>
    </div>
    <!-- 选择题 -->
    <div class="choicebox" v-if="taskids == 4">
      <img src="@/images/choicebj.png" alt="" class="choicebj" />
      <div class="choicetitle">单选题</div>
      <div class="choicename">1、请选择合适的探头摆放的位置（）</div>
      <div class="choicemain">
        <div class="choiceitem tool" @click="choiceidfn(1)">
          <img
            src="@/images/xx.png"
            alt=""
            class="normal choiceitemimg"
            v-if="choiceid != 1"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="active choiceitemimg"
            v-if="choiceid != 1"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="choiceitemimg"
            v-if="choiceid == 1"
          />
          <img src="@/images/x3.png" alt="" class="choiceitximg" />
          <div class="choiceitemname">A</div>
        </div>
        <div class="choiceitem tool" @click="choiceidfn(2)">
          <img
            src="@/images/xx.png"
            alt=""
            class="normal choiceitemimg"
            v-if="choiceid != 2"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="active choiceitemimg"
            v-if="choiceid != 2"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="choiceitemimg"
            v-if="choiceid == 2"
          />
          <img src="@/images/x2.png" alt="" class="choiceitximg" />
          <div class="choiceitemname">B</div>
        </div>
        <div class="choiceitem tool" @click="choiceidfn(3)">
          <img
            src="@/images/xx.png"
            alt=""
            class="normal choiceitemimg"
            v-if="choiceid != 3"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="active choiceitemimg"
            v-if="choiceid != 3"
          />
          <img src="@/images/x1.png" alt="" class="choiceitximg" />
          <img
            src="@/images/xxac.png"
            alt=""
            class="choiceitemimg"
            v-if="choiceid == 3"
          />
          <div class="choiceitemname">C</div>
        </div>
        <div class="choiceitem tool" @click="choiceidfn(4)">
          <img
            src="@/images/xx.png"
            alt=""
            class="normal choiceitemimg"
            v-if="choiceid != 4"
          />
          <img
            src="@/images/xxac.png"
            alt=""
            class="active choiceitemimg"
            v-if="choiceid != 4"
          />
          <img src="@/images/x4.png" alt="" class="choiceitximg" />
          <img
            src="@/images/xxac.png"
            alt=""
            class="choiceitemimg"
            v-if="choiceid == 4"
          />
          <div class="choiceitemname">D</div>
        </div>
        <div class="choicefalse" v-if="choicetip == 1">回答错误，正确答案A</div>
        <div class="choicetrue" v-if="choicetip == 2">回答正确</div>
      </div>
      <img
        src="@/images/closexz.png"
        alt=""
        class="choiceclose"
        @click="taskids = 4.1"
      />
      <div class="tool gjtoolqds" v-if="choicetip == 0" @click="choicefn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
      <div
        class="tool gjtoolqds"
        v-if="choicetip == 1 || choicetip == 2"
        @click="taskids = 4.1"
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">继续</div>
      </div>
    </div>

    <!-- 调节SID -->
    <div class="sidbox" v-if="taskids == 3">
      <img src="@/images/sidtjbj.png" alt="" class="sidtjbjimg" />
      <img src="@/images/tsidbj.png" alt="" class="tsidbjimg" />
      <div class="sidsbox tool tm" @click="sidsfn" ref="sidsbox">
        <img src="@/images/sids.png" alt="" class="normal" />
        <img src="@/images/sidsac.png" alt="" class="active" />
      </div>
      <div class="sidxbox tool tm" @click="sidxfn" ref="sidxbox">
        <img src="@/images/sidx.png" alt="" class="normal" />
        <img src="@/images/sidxac.png" alt="" class="active" />
      </div>
      <div class="tool gjtoolqdss" @click="sidfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
      <div class="sidjd">
        <div class="sidjdac" :style="{ height: heightsitpx + '%' }"></div>
      </div>
    </div>

    <!-- 调节照射视野灯 -->
    <div class="zsbox" v-if="taskids == 5.1 || taskids == 5">
      <!-- 视野窗 -->
      <div class="syqysdbox">
        <div
          class="syqysd"
          :style="{
            width: widthpx * 0.00521 + 'rem',
            height: heightpx * 0.00521 + 'rem'
          }"
        ></div>
      </div>
      <div class="mtimgbox">
        <img src="@/images/mtimg.png" alt="" class="mtimg" />
      </div>
      <div class="zsboxtj">
        <img src="@/images/zsboxtjimg.png" alt="" class="zsboxtjimg" />
        <div class="tool syjbox" @click="gj">
          <img src="@/images/syj.png" alt="" class="normal" />
          <img src="@/images/syjac.png" alt="" class="active" />
        </div>
        <div class="tool syjjbox" @click="gjj">
          <img src="@/images/syjj.png" alt="" class="normal" />
          <img src="@/images/syjjac.png" alt="" class="active" />
        </div>
        <div class="tool syjboxs" @click="kj">
          <img src="@/images/syj.png" alt="" class="normal" />
          <img src="@/images/syjac.png" alt="" class="active" />
        </div>
        <div class="tool syjjboxs" @click="kjj">
          <img src="@/images/syjj.png" alt="" class="normal" />
          <img src="@/images/syjjac.png" alt="" class="active" />
        </div>
        <!-- 旋钮 -->
        <img
          src="@/images/tzz.png"
          alt=""
          class="tzz"
          :style="{ transform: 'rotate(' + rotateds + 'deg)' }"
        />
        <img
          src="@/images/tzzs.png"
          alt=""
          class="tzzs"
          :style="{ transform: 'rotate(' + rotatedss + 'deg)' }"
        />
      </div>
      <div class="tool gjtoolqdss" @click="shiyfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 去曝光提示 -->
    <div class="qzsbox" v-if="taskids == 6.1">
      请进入控制室进行曝光操作
      <div class="qbgstart" @click="taskid = 7">去曝光</div>
    </div>
    <!-- 设置曝光参数 -->
    <div
      class="newdnbox"
      v-show="(taskids >= 7 && taskids < 8) || taskids == 10"
    >
      <!-- 关机 -->
      <img
        src="@/images/closedn.png"
        alt=""
        class="closedn tymb"
        v-if="taskids == 10"
        @click="taskids = 10.1"
      />
      <!-- 电脑框 -->
      <img src="@/images/dhk.png" alt="" class="dnk" />
      <img src="@/images/newdh2.png" alt="" class="newdn1" />
      <!-- 通用闪烁外边框  从左-右 上 - 下-->
      <div class="tybox1" ref="tybox1">
        <div class="tybox1add" @click="kv += 1" v-if="taskids != 10">
          <!-- 加 -->
        </div>
        <div class="tybox1remo" @click="kv -= 1" v-if="taskids != 10">
          <!-- 减 -->
        </div>
        <el-input v-model="kv" placeholder="" class="tyboxinput"></el-input>
        <div class="tyboxdw">KV</div>
      </div>
      <div class="tybox2" ref="tybox2">
        <div class="tybox1add" @click="mas += 1" v-if="taskids != 10">
          <!-- 加 -->
        </div>
        <div class="tybox1remo" @click="mas += 1" v-if="taskids != 10">
          <!-- 减 -->
        </div>
        <el-input v-model="mas" placeholder="" class="tyboxinput"></el-input>
        <div class="tyboxdw">mAs</div>
      </div>
      <div class="tybox3" ref="tybox3">
        <div class="tybox1add"><!-- 加 --></div>
        <div class="tybox1remo"><!-- 减 --></div>
        <el-input v-model="ms" placeholder="" class="tyboxinput"></el-input>
        <div class="tyboxdw">ms</div>
      </div>
      <div class="tybox4" ref="tybox4">
        <div class="tybox1add"><!-- 加 --></div>
        <div class="tybox1remo"><!-- 减 --></div>
        <div class="tyboxinputs">{{ mas * 10 }}</div>
        <div class="tyboxdw">mA</div>
      </div>

      <!-- 曝光图片 -->
      <div class="bgimgbox">
        <!-- 曝光1 -->
        <img
          src="@/images/1.png"
          alt=""
          v-if="taskids == 7.2 || taskids == 10"
        />
        <!-- 曝光2 -->
        <img
          src="@/images/1.png"
          alt=""
          v-if="
            (taskids == 7.3 || taskids == 7.11 || taskids == 7.12) &&
            this.id != 1
          "
        />
        <!-- 曝光3 -->
        <img src="@/images/1.png" alt="" v-if="taskids == 7.4" />
        <!-- 曝光4 -->
        <img src="@/images/1.png" alt="" v-if="taskids == 7.5" />
        <!-- 曝光5 -->
        <img src="@/images/1.png" alt="" v-if="taskids == 7.6" />
        <!-- 左下角数据 -->
        <div class="bjdatabox" v-if="taskids >= 7.2">
          <div class="dataitembox">
            KV:{{ kv }} &nbsp; &nbsp;mA:{{ mas * 10 }}
          </div>
          <div class="dataitembox">W:4678 &nbsp; L：2279</div>
        </div>
      </div>
      <!-- 保存曝光参数 -->
      <div
        class="bgstart"
        @click="bgstart"
        v-if="taskids != 7.11 || taskids != 7.12 || taskids != 7.13"
      >
        曝光
      </div>
      <div class="bgstart" v-if="taskids == 7.11">3</div>
      <div class="bgstart" v-if="taskids == 7.12">2</div>
      <div class="bgstart" v-if="taskids == 7.13">1</div>
      <!-- 保存曝光参数完成  -->
    </div>
    <!-- 通用框 -->
    <div class="bgtybox" v-if="bgtips">
      <div class="bgdesbox">
        {{ bgtips }}
      </div>
      <div class="tool gjtoolqdss" @click="bgqdfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 记录数值  taskids == 8 && !choicehomeshow-->
    <JLd v-if="taskids == 8.1" @jlsfn="jlsfn" :taskids="taskids" />

    <!-- 记录数值提示框 -->
    <div class="jlstipsbox" v-if="jlstips">
      <div class="jlstipdes">{{ jlstips }}</div>
      <div class="jlbottom">
        <!-- 是否符合要求的确定 -->
        <div class="jlbotan" @click="taskids = 11.1" v-if="taskids == 11">
          是
        </div>
        <div class="jlbotan" @click="taskids = 11.2" v-if="taskids == 11">
          否
        </div>
      </div>
    </div>
    <!-- 是否符合要求弹窗 -->
    <div class="jlstipsbox" v-if="jlstipstwo">
      <div class="jlstipdes">{{ jlstipstwo }}</div>
      <div class="jlbottom">
        <div class="jlbotan" @click="jlstipstwofn">确定</div>
      </div>
    </div>
    <!-- 获取预处理图像  -->
    <div class="yclmian" v-if="taskids == 9 && !yclpptboxshow">
      <div class="yclbox">
        <!-- 关闭 -->
        <img
          src="@/images/closexz.png"
          alt=""
          class="yclclose"
          @click="taskid = 10"
        />
        <div class="ycltop">定义</div>
        <div class="ycldes">
          <div>
            DR 预处理图像（Preprocessed Image）指数字化 X
            射线摄影（DR）设备中未经内置后处理算法优化的原始数字化图像，直接反映探测器采集的
            X 射线衰减信号，保留了最原始的成像数据。
          </div>
          <div>DR 预处理图像具有以下特点：</div>
          <div>
            （1）原始性：未经对比度增强、降噪、边缘锐化等后处理算法加工，保留探测器捕获的原始像素值和曝光参数（如
            KV/mA）。包含更多噪声和细节信息，视觉效果可能不如临床图像清晰。
          </div>
          <div>
            （2）数据完整性：可用于分析设备性能（如噪声水平、均匀性）或作为科研数据（如图像算法开发）。
          </div>
          <div>
            各个厂家都有不同的预处理图像存储方式，下面介绍几种预处理图像调取方式，供参考。
          </div>
        </div>
        <div class="yclboxbootnbox">
          <div class="tool yclboxbootn" @click="yclpptboxshow = true">
            <img src="@/images/ck.png" alt="" class="normal" />
            <img src="@/images/ckac.png" alt="" class="active" />
          </div>
          <div class="tool yclboxbootn" @click="taskid = 10">
            <img src="@/images/tig.png" alt="" class="normal" />
            <img src="@/images/tigac.png" alt="" class="active" />
          </div>
        </div>
      </div>
    </div>

    <!-- 预处理图像 ppt盒子   -->
    <div class="yclmian" v-if="yclpptboxshow">
      <div class="yclboxs">
        <!-- 关闭 -->
        <img
          src="@/images/closexz.png"
          alt=""
          class="yclcloses"
          @click="yclpptboxshow = false"
        />
        <div class="ycltops">DR预处理图像</div>
        <div class="ycldess">
          <div class="ycltable">
            <div
              class="yclitem1"
              :class="{ yclitemac: yclitemid == 1 }"
              @click="yclitemidfn(1)"
            >
              飞利浦 DR Eleva平台
            </div>
            <div
              class="yclitem2"
              :class="{ yclitemac: yclitemid == 2 }"
              @click="yclitemidfn(2)"
            >
              GE DR调取预处理图像
            </div>
          </div>
          <div class="yclitembox">
            <div class="tool yleftbox" @click="yclimgidfn(-1)">
              <img src="@/images/yleft.png" alt="" class="normal" />
              <img src="@/images/yleftac.png" alt="" class="active" />
            </div>
            <img
              :src="item.src"
              alt=""
              class="yclimg"
              v-for="(item, index) in ycldata"
              :key="index"
              v-show="index + 1 == yclimgid"
            />
            <div class="tool yrightbox" @click="yclimgidfn(1)">
              <img src="@/images/yright.png" alt="" class="normal" />
              <img src="@/images/yrightac.png" alt="" class="active" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 测量像素平均值 -->
    <CLxiang
      @tiptextfn="tiptextfn"
      v-if="taskids == 10.1 || taskids == 11"
      @clickItem="clickItem"
      :taskids="taskids"
      @jlsfn="jlsfn"
      @openVideo="openVideo"
    />
    <!-- 视频教程 -->
    <!-- 视频播放遮罩盒子 -->
    <div class="videozz" v-if="videoshow">
      <div class="videobox">
        <img
          src="@/images/closexz.png"
          alt=""
          class="closegz"
          @click="closeVideo"
        />
        <div class="videotitle">计算R²的视频教程</div>
        <div class="videomainbox">
          <div class="videomain">
            <video
              id="videoPlayer"
              autoplay
              playsinline
              controls
              src="https://zfatt.oss-cn-beijing.aliyuncs.com/experiment/stp/DR%E6%95%B0%E6%8D%AE%E6%8B%9F%E5%90%88%E8%BF%87%E7%A8%8B.mp4"
            ></video>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示电脑连接动画 -->
    <!-- <div class="bfdhbox" v-if="taskids == 1.2">
      <bfDh :mxmtnumber="mxmtnumber" ref="bfdh" @clickItemwc="clickItemwc" />
    </div> -->
  </div>
</template>
<script>
import { mixins } from '@/mixin/index'
import { threes } from '@/mixin/three'
import headMain from '@/components/headMain.vue'
import TipText from '@/components/tipText.vue'
import WarnNi from './warnNi.vue'
import JLd from '@/components/jLd.vue'
import CLxiang from '@/components/cLxiang.vue'
// import bfDh from '@/components/bfDh.vue'
export default {
  name: 'WorkspaceJsonSeen',

  //混入
  mixins: [mixins, threes],

  components: { headMain, TipText, WarnNi, JLd, CLxiang },

  data() {
    return {
      dlarry: [],
      mxmtnumber: 'ShuJuXian.glb',
      taskid: 1,
      yclpptboxshow: false,
      taskids: 1,
      choicehomeshow: false,
      id: 1,
      rotateds: 0,
      rotatedss: 0,
      heightpx: 290,
      widthpx: 270,
      heightsitpx: 50,
      gjltips: '',
      choicetip: 0,
      choiceid: 0,
      wpid: [],
      rightpx: 10,
      jbshow: false,
      jcid: 1,
      bsid: 1,
      timer: null,
      sum: 0,
      yclitemid: 1,
      videoshow: false
    }
  },

  watch: {
    taskid: {
      handler(i) {
        this.stopall()
        this.taskids = i
        this.bgtips = ''
        this.dlarry = []
        if (i < 4) {
          // 重置动画4
          this.resetAllAnimations()
          if (this.DH12) {
            this.DH12.visible = false
          }
        } else {
          if (this.DH12) {
            this.DH12.visible = true
          }
        }
        if (i == 4) {
          // 重置动画4
          this.resetAllAnimations()
        }
        if (i == 6) {
          this.resetAllAnimations()
        }
        if (i > 4) {
          this.setAnimFinishedAndStayLastFrame('6')
        }
        this.move(
          [0.362, 1.539, -4.092],
          [179.24 / 180, -0.75 / 180, 179.99 / 180]
        )
        this.clearfn()

        this.twinklePoint(-666, -666, -666)
      },
      deep: true,
      immediate: true
    },
    taskids: {
      handler(i) {
        this.yclpptboxshow = false
        // console.log('当前taskids', i)
        this.tiptext = ''

        if (i == 1.2) {
          this.playAction('1', '1.2')
        }
        if (i == 2) {
          this.tiptext = '取出滤线栅'
          this.twinklePoint(-0.488, 1.14, -1.189)
          this.move(
            [-0.67, 1.686, -3.328],
            [-165.39 / 180, 1.25 / 180, 179.67 / 180]
          )
        }

        if (i > 2.1) {
          this.planeTop.visible = true
          this.cylinder.visible = true
          this.planeBottom.visible = true
        }
        if (i == 3) {
          this.tiptext = '点击X线球管的上下按键，调节合适的SID'
        }
        if (i == 4.1) {
          this.tiptext = '点击探测器'
          this.twinklePoint(-0.778, 1.454, -1.356)
          this.move(
            [-0.57, 2.006, -2.948],
            [-164.19 / 180, 2.1 / 180, 179.4 / 180]
          )
        }

        if (i == 7) {
          // this.choicehomeshow = true
          this.taskids = 7.1
        }
        if (i == 5.1) {
          this.tiptext = '通过旋钮将照射野调整至合适范围'
        }

        if (i == 6) {
          // this.tiptext =
          //   '请输入检查数据,患者编号：20241018,患者姓名：验收测试,检查编号：20241018,登记号：20241018'
          // this.tiptext = '请点击1.00mm铜板'
          // this.twinklePoint(-0.778, 1.454, -1.356)
          this.move(
            [-0.57, 2.006, -2.948],
            [-164.19 / 180, 2.1 / 180, 179.4 / 180]
          )
          this.playAction('7', '1tongban')
          // this.twinklePoint(-0.274, 1.652, -8.119)
          // this.move(
          //   [-0.349, 1.625, -9.427],
          //   [-173.4 / 180, 0.29 / 180, 179.97 / 180]
          // )
        }
        if (i == 6.2) {
          // 添加黄色描边
          this.$refs.hzbh.$el.classList.add('hsmb')
          this.$refs.hzname.$el.classList.add('hsmb')
          this.$refs.jcbh.$el.classList.add('hsmb')
          this.$refs.jcdjh.$el.classList.add('hsmb')

          this.tiptext =
            '请输入检查数据,患者编号：20241018,患者姓名：验收测试,检查编号：20241018,登记号：20241018'
        }
        if (i == 6.3) {
          this.$refs.hzbh.$el.classList.remove('hsmb')
          this.$refs.hzname.$el.classList.remove('hsmb')
          this.$refs.jcbh.$el.classList.remove('hsmb')
          this.$refs.jcdjh.$el.classList.remove('hsmb')
          this.tiptext = '点击上肢关节，选择肩关节前后位'
        }
        if (i == 6.4) {
          this.$refs.hzbh.$el.classList.remove('hsmb')
          this.$refs.hzname.$el.classList.remove('hsmb')
          this.$refs.jcbh.$el.classList.remove('hsmb')
          this.$refs.jcdjh.$el.classList.remove('hsmb')
          this.tiptext = '点击上肢关节，选择肩关节前后位'
        }
        if (i == 6.5) {
          this.tiptext = '添加肩关节前后位'
        }
        if (i == 6.6) {
          this.tiptext = '选中肩关节前后位,然后点击患者检查'
        }
        if (i == 7.1) {
          this.tiptext = '请将KV调节为70，mAs调节为1.6'
        }
        if (i == 7.2) {
          this.tiptext = '请将KV调节为70，mAs调节为8'
        }
        if (i == 7.3) {
          this.tiptext = '请将KV调节为70，mAs调节为16'
        }
        if (i == 7.4) {
          this.tiptext = '请将KV调节为70，mAs调节为32'
        }
        if (i == 7.5) {
          this.tiptext = '请将KV调节为70，mAs调节为50'
        }
        if (i == 7.6) {
          this.timer = setTimeout(() => {
            clearTimeout(this.timer)
            this.bgtips = '请进入检查室查看并记录空气比释动能值'
          }, 1000)
        }
        if (i == 8) {
          this.tiptext = '请点击笔记本电脑，查看空气比释动能值'
          this.twinklePoint(-1.87, 1.229, -0.399)
          this.move(
            [-0.906, 1.744, -3.967],
            [-178.73 / 180, 0.74 / 180, 179.99 / 180]
          )
        }

        if (i == 11.1) {
          this.jlstipstwo = '经检测该项目符合上述标准要求'
        }
        if (i == 11.2) {
          this.jlstipstwo =
            '信号传递特性STP检测如不合格，请及时联系DR设备厂家工程师维修，同时应核实检测设备是否经过国家计量院的标准，是否发生故障。'
        }
        if (i == 10) {
          this.tiptext = '请关闭工作站，打开像素值测量系统'
        }

        // 处理两次的曝光
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 开启视频事件
    openVideo() {
      this.videoshow = true
      this.$nextTick(() => {
        // 获取视频元素
        const video = document.getElementById('videoPlayer')
        // 获取视频弹窗元素
        const videoBox = document.querySelector('.videozz')
        // 显示视频弹窗
        videoBox.style.display = 'block'
        // 开始播放视频
        video.play()
        // 开启声音（设置音量，0为静音，1为最大音量）
        video.muted = false
        video.volume = 1
      })
    },

    // 关闭视频事件
    closeVideo() {
      // 获取视频元素
      const video = document.getElementById('videoPlayer')
      // 获取视频弹窗元素
      const videoBox = document.querySelector('.videozz')
      // 暂停视频播放
      video.pause()
      // 关闭声音
      video.muted = true
      // 隐藏视频弹窗（如果需要完全隐藏的话）
      videoBox.style.display = 'none'
      this.videoshow = false
    }
  }
}
</script>

<style scoped>
.dd {
  height: 100%;
  width: 100%;
}
.yclmian {
  width: 1920px;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999;
}
.yclbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 700px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #213047;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.yclboxs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1140px;
  height: 800px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #213047;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ycltop {
  width: 996px;
  height: 80px;
  background: #425e7c;
  line-height: 80px;
  font-size: 30px;
  color: #ffffff;
  padding-left: 15px;
  box-sizing: border-box;
  border-radius: 5px 5px 0px 0px;
}
.ycltops {
  width: 100%;
  height: 80px;
  background: #425e7c;
  line-height: 80px;
  font-size: 30px;
  color: #ffffff;
  text-align: center;
  border-radius: 5px 5px 0px 0px;
}
.ycldes {
  font-size: 30px;
  color: #333333;
  line-height: 48px;
  padding: 45px;
}
.yclboxbootn img {
  width: 199px;
  height: 76px;
  margin: 0px 10px;
}
.yclboxbootnbox {
  position: absolute;
  left: 50%;
  bottom: -90px;
  transform: translate(-50%, 0);
  display: flex;
  cursor: pointer;
}

.bgstart {
  position: absolute;
  right: 150px;
  bottom: 82px;
  cursor: pointer;
  width: 100px;
  height: 45px;
  background: linear-gradient(360deg, #ff6a38 0%, #ff9c49 100%);
  box-shadow: 0px 2px 0px 0px #482315,
    inset 0px 6px 3px 0px rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  border: 1px solid #ffbb4f;
  color: #ffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.bgimgbox {
  width: 577px;
  height: 620px;
  position: absolute;
  left: 280px;
  top: 84px;
}

.bgimgbox img {
  width: 577px;
  height: 620px;
}
.bjdatabox {
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.dataitembox {
  font-size: 16px;
  color: #7c7c7c;
}
.tyboxinputs {
  color: #ffff;
  font-size: 13.5px;
  text-align: center;
  margin-top: 8px;
  margin-left: -25px;
}
.yclclose {
  position: absolute;
  right: -15px;
  top: -20px;
  z-index: 99;
  cursor: pointer;
  width: 54px;
  height: 56px;
}
.yclcloses {
  position: absolute;
  right: -15px;
  top: -20px;
  z-index: 99;
  cursor: pointer;
  width: 54px;
  height: 56px;
}

.ycldess {
  font-size: 30px;
  color: #333333;
  line-height: 48px;
  display: flex;
  flex-direction: column;
}
.ycltable {
  display: flex;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  margin: 40px auto;
}
.yclitem1 {
  width: 286px;
  height: 60px;
  background: #ffffff;
  border-radius: 8px 0px 0px 8px;
  color: #000000;
  border: 1px solid #d2dae5;
  cursor: pointer;
}

.yclitem2 {
  width: 286px;
  height: 60px;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
  border: 1px solid #d2dae5;
  cursor: pointer;
  color: #000000;
}
.yclitemac {
  color: #ffff;
  background: #425e7c;
  border: 1px solid transparent;
}
.yclitembox {
  display: flex;
  position: relative;
  padding: 0px 20px;
}
.yclimg {
  width: 944px;
  height: 544px;
  margin: 0px auto;
  display: block;
}
.yleftbox img {
  width: 60px;
  height: 60px;
}
.yrightbox img {
  width: 60px;
  height: 60px;
}
.closedn {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 30px;
  right: 50px;
  z-index: 999;
  cursor: pointer;
}
.videozz {
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.videobox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1080px;
  height: 714px;
  display: flex;
  flex-direction: column;
}
.videotitle {
  width: 1080px;
  height: 80px;
  background-color: #425e7c;
  border-radius: 10px 10px 0px 0px;
  box-sizing: border-box;
  font-size: 30px;
  color: #ffffff;
  padding-left: 20px;
  line-height: 80px;
}
.videomainbox {
  height: 648px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.videomain {
  width: 1020px;
  height: 574px;
  overflow: hidden;
  border-radius: 20px;
}
.closegz {
  width: 54px;
  height: 56px;
  position: absolute;
  right: -20px;
  top: -20px;
  cursor: pointer;
}

.videomain video {
  width: 100%; /* 宽度铺满容器 */
  height: 100%; /* 高度铺满容器 */
  object-fit: cover; /* 保持比例并铺满容器（超出部分裁剪） */
}
.qzsbox {
  width: 450px;
  height: 150px;
  background: linear-gradient(317deg, #bec8d4 0%, #f1f7ff 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 10px 10px;
  border: 2px solid #213047;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #313d53;
  font-size: 30px;
  text-align: center;
  line-height: 140px;
}

.qbgstart {
  position: absolute;
  left: 50%;
  bottom: -50px;
  transform: translate(-50%, 0);
  cursor: pointer;
  width: 100px;
  height: 45px;
  background: linear-gradient(360deg, #ff6a38 0%, #ff9c49 100%);
  box-shadow: 0px 2px 0px 0px #482315,
    inset 0px 6px 3px 0px rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  border: 1px solid #ffbb4f;
  color: #ffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
</style>
